<template>
    <div>
        <!-- 评价弹框 -->
        <DialogInput ref="evaluate" title="交易评价">
            <div class="rem-dialog-con text_left">
                <GiveMark :score="0" :isDisabled="false" @changeScore="changeScore"/>
                <el-row class="row_text hpx-label">评价内容</el-row>
                <el-input type="textarea" v-model="evaluateInfo.description" placeholder="请在此输入您对卖方的具体评价(如价格、打款、信用等方面)"></el-input>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">取消</el-button>
                <el-button @click="submitEvaluate()" type="primary" class="dialog-button">提交评价</el-button>
            </span>
        </DialogInput>
        <!-- 查看评价弹框 -->
        <DialogInput ref="lookEvaluate" title="评价详情">
            <div class="rem-dialog-con text_left">
                <!-- 
                    作为买方
                -->
                <el-row v-if="channel == 'buyer'">
                    <FormTitle title="卖方给您的评价"/>
                    <el-row v-if="orderInfo.order_status_id == 811 || orderInfo.order_status_id == 813">
                        <GiveMark :score="preViewEvaluate.drawerStarLevel" :isDisabled="true"/>
                        <el-row class="row_text hpx-label">评价内容</el-row>
                        <el-row class="hpx-primary evaluate_content">{{preViewEvaluate.drawerDescription}}</el-row>
                    </el-row>
                    <el-row class="empty" v-if="orderInfo.order_status_id == 812">
                        对方暂未给您评价，请稍后查看！
                    </el-row>
                    <FormTitle title="您给卖方的评价"/>
                    <el-row v-if="orderInfo.order_status_id == 812 || orderInfo.order_status_id == 813">
                        <GiveMark :score="preViewEvaluate.receiverStarLevel" :isDisabled="true"/>
                        <el-row class="row_text hpx-label">评价内容</el-row>
                        <el-row class="hpx-primary evaluate_content">{{preViewEvaluate.receiverDescription}}</el-row>
                    </el-row>
                    <el-row class="empty" v-if="orderInfo.order_status_id == 811">
                        您还未给对方评价，快去 <span class="hpx-link" @click="toEvaluate">评价</span>
                    </el-row>
                </el-row>
                <!-- 
                    作为卖方
                 -->
                <el-row v-if="channel == 'seller'">
                    <FormTitle title="买方给您的评价"/>
                    <el-row v-if="orderInfo.order_status_id == 812 || orderInfo.order_status_id == 813">
                        <GiveMark :score="preViewEvaluate.receiverStarLevel" :isDisabled="true" @changeScore="changeScore"/>
                        <el-row class="row_text hpx-label">评价内容</el-row>
                        <el-row class="hpx-primary evaluate_content">{{preViewEvaluate.receiverDescription}}</el-row>
                    </el-row>
                    <el-row class="empty" v-if="orderInfo.order_status_id == 811">
                        对方暂未给您评价，请稍后查看！
                    </el-row>
                    <FormTitle title="您给买方的评价"/>
                    <el-row v-if="orderInfo.order_status_id == 811 || orderInfo.order_status_id == 813">
                        <GiveMark :score="preViewEvaluate.drawerStarLevel" :isDisabled="true" @changeScore="changeScore"/>
                        <el-row class="row_text hpx-label">评价内容</el-row>
                        <el-row class="hpx-primary evaluate_content">{{preViewEvaluate.drawerDescription}}</el-row>
                    </el-row>
                    <el-row class="empty" v-if="orderInfo.order_status_id == 812">
                        您还未给对方评价，快去 <span class="hpx-link" @click="toEvaluate">评价</span>
                    </el-row>
                </el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">关闭</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator';
    import { mapState, mapGetters, mapMutations } from 'vuex';
    import DialogInput from '@component/common/DialogInput.vue'
    import FormTitle from '@component/common/FormTitle.vue'
    import GiveMark from '@component/common/GiveMark.vue'
    @Component({
        components:{
            DialogInput,
            FormTitle,
            GiveMark
        },
        computed: {
            ...mapState([
                'userInfo'
            ])
        }
    })
    export default class DialogEvaluate extends Vue {
        @Prop() channel !:string
    //data
        //订单详细信息
        orderInfo = {}
        //要提交的评价信息
        evaluateInfo = {
            starLevel: '0',
            description: ''
        }
        //要查看的评价信息
        preViewEvaluate = {}
    //methods
        changeScore (score) {
            this.evaluateInfo.starLevel = score
        }
        submitEvaluate () {
            this.$emit('submitEvaluate',this.evaluateInfo)
        }
        closeDialog () {
            this.$refs['evaluate'].closeDialog()
            this.$refs['lookEvaluate'].closeDialog()
        }
        addEvaluateDialog () {
            this.$refs['evaluate'].openDialog()
        }
        async lookEvaluateDialog (model) {
            //查看评价
            this.orderInfo = model
            let res = await this.$http.get(`order/appraisal/${model.id}`)
            if(res.status == 200){
                this.preViewEvaluate = res.data
                Vue.set(this.preViewEvaluate,'receiverStarLevel',res.data.receiverStarLevel)
                Vue.set(this.preViewEvaluate,'drawerStarLevel',res.data.drawerStarLevel)
                this.$refs['lookEvaluate'].openDialog()
            }
        }
        toEvaluate () {
            this.$refs['lookEvaluate'].closeDialog()
            this.$refs['evaluate'].openDialog()
        }
    }
</script>

<style lang="scss" scoped>
    .row_text{
        line-height: 50px;
    }
    .empty{
        line-height: 150px;
        text-align: center;
        font-size: 14px;
        color: $__color-label;
        .hpx-link{
            cursor: pointer;
        }
    }
    .evaluate_content{
        margin: 12px 0 30px 0;
    }
    
</style>
